<template>
	<view>
		<navBar title="收款记录"></navBar>
		<view class="list" v-for="(item, index) in pageData" :key="index">
			<image :src="staticImg('record001.png')" mode="aspectFill" class="Icon"></image>
			<view class="content">
				<view class="ellipsis_1 title">{{ item.userName }}</view>
				<text class="ellipsis_1 desc">{{ item.createTime }}</text>
			</view>
			<view class="Info">
				<text class="amount">{{ item.amount }}</text>
				<text class="Status">{{ statusTxt(item.status) }}</text>
			</view>
		</view>

		<up-empty
			mode="list"
			marginTop="100"
			text="暂无相关内容"
			v-if="!pageData.length"></up-empty>
	</view>
</template>

<script setup>
	import { ref, computed, watch, nextTick, onUnmounted } from 'vue';
	import { onLoad, onShow, onReady, onReachBottom } from '@dcloudio/uni-app';
	import { useMainStore } from '@/stores/index';
	import {
		toUrl,
		staticImg,
		imgUrls,
		Toast,
		chooseImage,
		uploadFile,
		previewImage,
	} from '@/utils/utils.js';
	import Http from '@/utils/request.js';
	const mainStore = useMainStore();
	const pageSize = ref(10);
	const pageNum = ref(1);
	const pageData = ref([]);
	const getMore = ref(true);

	onLoad((opt) => {
		if (opt.chatId) orderId.value = opt.chatId;
		getTransferRecord();
	});

	const getTransferRecord = () => {
		Http.get({
			url: '/lawyer/getTransferRecord',
			data: {
				pageSize: pageSize.value,
				pageNum: pageNum.value,
			},
		}).then((res) => {
			if (res.code != 0) return Toast(res.msg);
			const result = res.rows || [];
			pageNum.value == 1
				? (pageData.value = result)
				: (pageData.value = [...pageData.value, ...result]);
			if (pageSize.value < result.length) getMore.value = false;
		});
	};

	const statusTxt = (status) => {
		switch (status) {
			case '0':
				return '待处理';
				break;
			case '1':
				return '转账成功';
				break;
			case '2':
				return '转账失败';
				break;
			case '3':
				return '拒绝';
				break;
			default:
				return '';
		}
	};

	onReachBottom(() => {
		if (!getMore.value) return;
		pageNum.value++;
		getTransferRecord();
	});
</script>

<style lang="scss">
	page {
		background-color: $page;
		padding-bottom: 20rpx;
	}
</style>
<style lang="scss" scoped>
	.list {
		width: 710rpx;
		margin: 20rpx auto 0;
		background-color: #fff;
		padding: 20rpx;
		display: flex;
		align-items: center;
		border-radius: 10rpx;
		.Icon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}
		.content {
			flex: 1;
			height: 80rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.title {
				color: #000;
				font-size: 28rpx;
			}
			.desc {
				color: #999;
				font-size: 24rpx;
			}
		}
		.Info {
			display: flex;
			height: 80rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 20rpx;
			.amount {
				color: #000;
				font-size: 32rpx;
				font-weight: bold;
			}
			.Status {
				color: #999;
				font-size: 24rpx;
				text-align: right;
			}
		}
	}
</style>
